<template>
    <div class="createPost-container">
        <label>标签信息</label>
        <el-form ref="postForm" :model="postForm" class="form-container">
            <div class="createPost-main-container">
                <el-form-item prop="tags" style="margin-bottom: 40px;" label-width="90px" label="标签:">
                    <el-select style="width: 100%" multiple v-model="postForm.tags" placeholder="请选择标签">
                        <el-option :value="tag.id" :label="tag.name" v-for="(tag, index) in tag_list" :key="index">{{ tag.name }}</el-option>
                    </el-select>
                </el-form-item>
                <el-button v-loading="loading" style="margin-left: 10px;" type="primary" @click="submitForm">
                    保存
                </el-button>
            </div>
        </el-form>
        <div style="margin-top: 40px"></div>
        <label>收件信息</label>
        <el-form ref="consigneeForm" :model="consigneeForm" :rules="consigneeRules" class="form-container">
            <div class="createPost-main-container">
                <el-form-item :label="$t('城市')" prop="consignee_city" label-width="100px">
                    <v-distpicker :province="consigneeForm.consignee_prov" :city="consigneeForm.consignee_city" :area="consigneeForm.consignee_district" @province="province" @city="city" @area="area" />
                </el-form-item>
                <el-form-item :label="$t('详细地址')" prop="consignee_address" label-width="100px">
                    <el-input v-model="consigneeForm.consignee_address" style="width:400px" type="text" />
                </el-form-item>
                <el-form-item :label="$t('收件人')" prop="consignee_name" label-width="100px">
                    <el-input v-model="consigneeForm.consignee_name" style="width:400px" type="text" />
                </el-form-item>
                <el-form-item :label="$t('收件电话')" prop="consignee_mobile" label-width="100px">
                    <el-input v-model="consigneeForm.consignee_mobile" style="width:400px" type="number" />
                </el-form-item>
                <el-form-item :label="$t('快递须知')" prop="consignee_note" label-width="100px">
                    <el-input v-model="consigneeForm.consignee_note" type="textarea" :rows="5" style="width:400px" />
                </el-form-item>
                <el-button v-loading="loading" style="margin-left: 10px;" type="primary" @click="submitConsigneeForm">
                    保存
                </el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import { ofScene } from '@/platform/api/tag'
import { get as consigneeOfStore, set as setConsigneeOfStore } from '@/shop/api/consignee/consignee'
import { ofStore as tagOfStore, set as setTagOfStore } from '@/shop/api/tag/store'

import VDistpicker from 'v-distpicker'

const defaultForm = {
    tags: []
}

const defaultConsigneeForm = {
    consignee_prov: '',
    consignee_city: '',
    consignee_district: '',
    consignee_address: '',
    consignee_name: '',
    consignee_mobile: '',
    consignee_note: ''
}

export default {
    name: 'GoodsDelivery',
    components: { VDistpicker },
    data() {
        const validateRequire = (rule, value, callback) => {
            if (value === '' || value === null || value === undefined) {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        return {
            id: 0,
            loading: false,
            tag_list: [],
            postForm: Object.assign({}, defaultForm),
            consigneeForm: Object.assign({}, defaultConsigneeForm),
            consigneeRules: {
                consignee_city: [{ validator: validateRequire, message: '城市为必填字段', trigger: 'blur' }],
                consignee_address: [{ validator: validateRequire, message: '详细地址为必填字段', trigger: 'blur' }],
                consignee_name: [{ validator: validateRequire, message: '收件人为必填字段', trigger: 'blur' }],
                consignee_mobile: [{ validator: validateRequire, message: '客服电话为必填字段', trigger: 'blur' }]
            },
        }
    },
    created() {

        const id = this.$route.query.id
        this.id = id

        ofScene({
            scene: 'store'
        }).then(res => {
            this.tag_list = res.data.items
        })

        this.fetchData()
        // Why need to make a copy of this.$route here?
        // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
        // https://github.com/PanJiaChen/vue-element-admin/issues/1221
    },
    methods: {
        province(data) {
            this.consigneeForm.consignee_prov = data.value
        },
        city(data) {
            this.consigneeForm.consignee_city = data.value
        },
        area(data) {
            this.consigneeForm.consignee_district = data.value
        },
        fetchData() {
            tagOfStore({ id: this.id }).then(response => {
                if (response.data.tags !== null && response.data.tags !== '' && response.data.tags !== undefined) {
                    let DetptIds = response.data.tags.toString();
                    let dpData = DetptIds.split('|');
                    for (var i = 0; i < dpData.length; i++) {
                        dpData[i] = parseInt(dpData[i]);
                    }
                    this.postForm.tags = dpData
                }
            }).catch(err => {
                console.log(err)
            })
            consigneeOfStore({
                store_id: this.id
            }).then(res => {
                this.consigneeForm.consignee_prov = res.data.consignee_prov
                this.consigneeForm.consignee_city = res.data.consignee_city
                this.consigneeForm.consignee_district = res.data.consignee_district
                this.consigneeForm.consignee_address = res.data.consignee_address
                this.consigneeForm.consignee_name = res.data.consignee_name
                this.consigneeForm.consignee_mobile = res.data.consignee_mobile
                this.consigneeForm.consignee_note = res.data.consignee_note
            })
        },
        submitForm() {
            this.$refs.postForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const data = Object.assign({}, this.postForm, { id: this.id })
                    if (this.postForm.tags != null && this.postForm.tags.length > 0) {
                        data.tags = this.postForm.tags.join('|')
                    }
                    setTagOfStore(data).then(response => {
                        this.$notify({
                            title: '成功',
                            message: '编辑成功',
                            type: 'success',
                            duration: 2000
                        })
                        // this.postForm.status = 'published'
                        this.loading = false
                    }).catch(err => {
                        console.log(err)
                        this.loading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        submitConsigneeForm() {
            this.$refs.consigneeForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const data = Object.assign({}, this.consigneeForm, { store_id: this.id })
                    setConsigneeOfStore(data).then(response => {
                        this.$notify({
                            title: '成功',
                            message: '编辑成功',
                            type: 'success',
                            duration: 2000
                        })
                        // this.postForm.status = 'published'
                        this.loading = false
                    }).catch(err => {
                        console.log(err)
                        this.loading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
    position: relative;

    .createPost-main-container {
        padding: 40px 45px 20px 50px;

        .postInfo-container {
            position: relative;
            @include clearfix;
            margin-bottom: 10px;

            .postInfo-container-item {
                float: left;
            }
        }
    }

    .word-counter {
        width: 40px;
        position: absolute;
        right: 10px;
        top: 0px;
    }
}

.article-textarea ::v-deep {
    textarea {
        padding-right: 40px;
        resize: none;
        border: none;
        border-radius: 0px;
        border-bottom: 1px solid #bfcbd9;
    }
}
</style>
